<template>
	<view class="collectOuter">
		<view class="collect">
			<movable-area class="scrollOuter" v-for="item in collectionData.list" :key="item.id">
				<movable-view class="max" direction="all">
					<li class="text1" @click="detailTo(item.goods.id)">
						<image :src="item.goods.image_url" mode=""></image>
						<view class="collect_r">
							<view class="collect_r_l">
								<view>{{item.goods_name}}</view>
								<p>￥<span>{{item.goods.price}}</span></p>
								<p>{{item.ctime}}</p>
							</view>
							<view class="collect_r_r">
								<image src="../../static/images/iconImg/yjt.png" mode=""></image>
							</view>
						</view>
					</li>
					<view class="text2" @click="del">删除</view>
				</movable-view>
			</movable-area>

		</view>

		<!-- <movable-area class="scrollOuter">
			<movable-view class="max" direction="all">
				<view class="text1">text1</view>
				<view class="text2">text2</view>
			</movable-view>
		</movable-area> -->

		<view class="footer">
			没有更多数据了
		</view>
	</view>
</template>

<script>
	import {
		getCollectionApi
	} from '../../api/paiModule/home.js'
	export default {
		data() {
			return {
				collectionData: {}
			};
		},
		onShow() {
			this.getCollection()
		},

		methods: {

			// 时间转换
			timeChange(time) {
				const date = new Date(time)

				const year = date.getFullYear()
				const month = date.getMonth() >= 10 ? date.getMonth() : `0${date.getMonth()}`
				const day = date.getDay() >= 10 ? date.getDay : `0${date.getDay()}`

				const h = date.getHours()
				const m = date.getMinutes()
				const s = date.getSeconds()

				const newTime = `${year}-${month}-${day} ${h}:${m}:${s}`

				return newTime
			},

			// 获取收藏
			async getCollection() {
				const {
					data: res
				} = await getCollectionApi({
					limit: 10,
					method: "user.goodscollectionlist",
					page: 1,
					token: uni.getStorageSync('token')
				})
				res.data.list.forEach((item) => {
					const timeRes = this.timeChange(item.ctime * 1000)
					item.ctime = timeRes
				})
				this.collectionData = res.data
				console.log(this.collectionData.list);
			},

			// 去详情页
			detailTo(id) {
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail?id=' + id
				})
			},

			// 删除
			del() {
				console.log('删除');
			},

		},
	}
</script>

<style lang="scss" scoped>
	.collectOuter {
		height: 93.4vh;
		width: 100%;
		background-color: #f1f1f1ff;
		position: relative;
		padding-bottom: 20px;

		.collect {
			width: 100%;
			padding-top: 0px;
			background-color: #fff;
			padding-left: 0px;
			padding-bottom: 20px;

			li {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				padding: 10px 0;
				padding-left: 10px;

				&>image {
					width: 60px;
					height: 70px;
					margin-right: 10px;
				}

				.collect_r {
					display: flex;
					align-items: center;

					.collect_r_l {
						font-size: 12px;
						width: 220px;
						display: flex;
						flex-direction: column;
						flex-wrap: wrap;

						view {
							&:nth-child(1) {
								width: 100%;
								word-wrap: break-word;
								word-break: break-all;
								white-space: pre-line;
							}
						}

						p {
							&:nth-child(2) {
								color: #ff0000;
								margin: 2px 0;
								font-size: 14px;
							}

							&:nth-child(3) {
								color: #9c9c9cff;
							}
						}
					}

					.collect_r_r {
						image {
							width: 16px;
							height: 16px;
							margin-left: 20px;
						}
					}
				}
			}
		}

		.footer {
			width: 100%;
			text-align: center;
			font-size: 12px;
			color: #9c9c9cff;
			margin-top: 20px;
		}

	}

	.scrollOuter {
		width: 120%;
		height: 80px;
		background-color: #fff;
		margin-top: 20px;

		.max {
			height: 100%;
			width: 120%;
			display: flex;
			align-items: flex-start;

			.text1 {
				height: 100%;
				width: 70%;
			}

			.text2 {
				width: 80px;
				height: 100%;
				background-color: #ff0000;
				color: #fff;
				text-align: center;
				font-size: 16px;
				line-height: 80px;
			}
		}
	}
</style>